<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<style type="text/css">
			.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 75%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 20px;
			}
			
			.context{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				height: calc(100% - 70px);
			}
			.tleft{
				width: 25%;
			}
			.tright{
				width: 75%;
				
				height: 100%
			}
			.tmain{
				width: 100%;
				height: 100%;
			}
			.tleft>div{
				width: 100%;
				height: 2.5em;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.bgw{
				background-color: white;
			}
			.goodsdiv{
				width: 100%;
				padding: 0.5em;
				height: auto;
				border-bottom: 1px solid #ACACB4;
			}
			
			.topdiv{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.botdiv{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			.toptext{
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-direction: column;
				height: 4.375em;
			}
			.topimg{
				width: 40%;
				height: 4.375em;
			}
			.topimg>img{
				width: 100%;
				height: 100%;
			}
			.qian{
				width: 50%;
			}
			*{
				/*font-size: 0.9em;*/
			}
		</style>
	</head>



	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">库存</h1>
		    <div class="hicon mui-icon-right-nav mui-pull-right" id="adddiv">
		    	<img src="../img/add.png"/>
		    </div>
		</header>
		<div class="mui-content">
		    <div class="content">
		    	<div class="search">
		    		<div class="simg">
		    			<img src="../images/60x60.gif"/>
		    		</div>
		    		<div class="ssdiv">
		    			<input class="ssinp" type="" name="" id="" value=""  placeholder="请输入编码或名称"/>
		    		</div>
		    		<div class="simg">
		    			<img src="../images/60x60.gif"/>
		    		</div>
		    	</div>
		    </div>
		    <div class="context">
		    	<div class="tleft" id="selectdiv">
		    		<div class="bgw"  href="#" id="3">
		    			所有商品
		    		</div>
		    		<div class="" href="#" id="1">
		    			1个商品
		    		</div>
		    		<div class="" id="2" href="#">
		    			2个商品
		    		</div>
		    	</div>
		    	<div class="tright bgw">
		    		<div class="tmain" id="tmain">
		    			
		    			<!--
                        	作者：592176224@qq.com
                        	时间：2018-12-28
                        	描述：
                      
                        <div class="goodsdiv">
		    				<div class="topdiv">
		    					<div class="topimg">
		    						<img src="../images/books_bg.png"/>
		    					</div>
		    					<div class="toptext">
		    						<div id="">
		    							maimaimai
		    						</div>
		    						<div class="">
		    							库存：100
		    						</div>
		    					</div>
		    				</div>
		    				<div class="botdiv">
		    					<div class="qian">
		    						￥100.00
		    					</div>
		    					<div class="">
		    						<div class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='10'>
		    						    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
		    						    <input class="mui-input-numbox" type="number" />
		    						    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
		    						</div>
		    					</div>
		    				</div>
		    			</div>
		    			  -->	
		    		</div>
		    		
		    		<div class="morediv hidden" id="moreid">
				   		<span id="more_list">更多</span>
				   	</div>
				   	<div class="footgd"></div>
		    		
		    	</div>
		    </div>
		  
		    <div class="footdiv">
		    	<div class="fleft">
		    		<div class="fimg">
		    			<img src="../images/60x60.gif"/>
		    		</div>
		    		<div class="">
		    			￥100.00
		    		</div>
		    	</div>
		    	<div class="fright" id="subut">
		    		库存
		    	</div>
		    </div>
		</div>
		
		
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				
				getgoods(3);
				$('#selectdiv').on('tap', 'div', function(e) {
                var targettab = this.getAttribute('id');
                var targetclass = this.getAttribute('class');
	                if(targetclass == ""){
	                	$(this).addClass('bgw').siblings().removeClass('bgw');
	                	getgoods(parseInt(targettab));
	                	
	                }else{
	                	
	                }
           	 	});
           	 	$('#adddiv').on('tap',function(e) {
	                mui.openWindow({
	                	url:'addgoods.html',
	                	id:'addgoods'
	                })
	                
           	 	});
           	 	$('#subut').on('tap',function(e) {
	                mui.openWindow({
	                	url:'childPages/theInvoicing.html',
	                	id:'theInvoicing'
	                })
	                
           	 	});
				
				
			}
			
			function getgoods(id){
				var tmian = document.getElementById("tmain");
				tmian.innerHTML = "";
				var str = '<div class="goodsdiv"><div class="topdiv"><div class="topimg">'+
		    	'<img src="../images/books_bg.png"/></div><div class="toptext">'+
		    	'<div id="">商品名</div><div class="">库存：100</div></div></div>'+
		    	'<div class="botdiv"><div class="qian">￥100.00</div><div class="">'+
		    	'<div class="mui-numbox" data-numbox-step="1" data-numbox-min="0" data-numbox-max="10">'+
		        '<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>'+
		        '<input class="mui-input-numbox" type="number" />'+
		        '<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>'+
		    	'</div></div></div></div>';
				for(var i = 0; i <id; i++){
					tmian.innerHTML += str;
				}
				tmian.innerHTML += '<div class="fgd"></div>';
				
				mui('.mui-numbox').numbox();
			}
			
		</script>
	</body>

</html>